<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar :is-back="true" title="我的群组">
			<view slot="right">
				<view class="create-text">创建群组</view>
			</view>
		</u-navbar>
		<view style="position: fixed;width: 750rpx;z-index: 10;padding: 0rpx 32rpx;background: #FFFFFF;">
		 <u-tabs :list="tabList" style="margin-top: 18rpx;" :is-scroll="false" active-color="#0052D9" inactive-color="#858A99" :current="current" 
		 @change="change"></u-tabs>
		</view>
		<view style="width: 750rpx;height: 100rpx;"></view>
		
		<view class="allwrap">
			<scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: (clientHeight-20) + 'px'}"
			:scroll-with-animation="scrollAnimation">
			<view class="flexal" style="margin-top: 40rpx;" v-for="(item,index) in list" :key="index">
				<image :src="item.avatar" class="icon"></image>
				<view class="text text-1">{{item.name}}</view>
			</view>
			</scroll-view>
		</view>
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[{
					name: '我管理的群组'
				}, {
					name: '我加入的群组'
				}],
				current:0,
				scrollAnimation:true,
				list:[
					{
						name:'群组名称名称名称（10）',
						avatar:'/static/user/avatar.png'
					},{
						name:'群组名称名称名称（10）',
						avatar:'/static/user/avatar.png'
					},{
						name:'群组名称名称名称（10）',
						avatar:'/static/user/avatar.png'
					},{
						name:'群组名称名称名称（10）',
						avatar:'/static/user/avatar.png'
					},{
						name:'群组名称名称名称（10）',
						avatar:'/static/user/avatar.png'
					},{
						name:'群组名称名称名称（10）',
						avatar:'/static/user/avatar.png'
					},
				]
			}
		},
		methods: {
			change(e){
				this.current = e
			}
		}
	}
</script>

<style lang="less">
	.create-text{
		margin-right: 32rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #0052D9;
	}
	.icon{
		width: 66rpx;
		height: 66rpx;
		border-radius: 50%;
	}
	.chat-window{
		// background: #000;
	}
	.text{
		width: 600rpx;
		margin-left: 20rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
	}
</style>
